<template>
	<!-- 54是搜索框整体高度  52是tab的整体高度  不展示搜索框时需去除54-->
	<view class="page" :style="{'min-height':h+'px','padding-top':(mt+54+52)+'px'}">
		<!-- 头部 -->
		<c-nav-bar title="渔家乐列表" backUrl="/pages/my/index"></c-nav-bar>

		<TopTabs :list="tabList" @changeTab="changeTab" :top="mt" :placeholder="'输入订单号'" @sousuo="sousuo"></TopTabs>

		<view class="orders">
			<view v-for="(item,index) in orderList" :key="index" :class="item.state==3?'qx':''"
				@tap.prevent="toDetails(item)">
				<view class="top">
					<view class="left">
						<image src="https://i.ringzle.com/file/20231130/4c98840700944e86b6bbbd0dce14fae5.png"></image>
						<text>{{item.fishermanName}}</text>
					</view>
					<view class="right">
						<text :class="oscConfig[item.state]||'textDcx'">{{FishJialeOcfg[item.state]}}</text>
					</view>
				</view>
				<view class="content">
					<view class="title">
						<text>{{item.thingName}}</text>
						<text>￥{{item.totalPrice}}</text>
					</view>
					<view class="date">
						<!-- 			<text>全票 X {{item.qpNum}},</text>
						<text v-if="item.etpNum>0">儿童票 X {{item.etpNum}},</text>
						<text>共{{item.qpNum+item.etpNum}}张</text> -->
					</view>
					<view class="room_price">
						<text>时间：{{item.orderTime}}</text>
					</view>
				</view>
				<view class="btns" v-if="item.state==-3 || item.state==3 ">
					<view @tap.stop="applyAfterSales(item)" class="btn_blue">申请售后</view>
					<view @tap.stop="del(item)" class="btn_blue">删除</view>
					<view @tap.stop="appraise(item)" class="btn_blue">评价</view>
				</view>
				<view class="btns" v-if="item.state==0">
					<view @tap.stop="cancelOrder(item)">取消</view>
					<view @tap.stop="toPay(item)" class="btn_blue">去支付</view>
				</view>
				<view class="btns" v-if="item.state==4">
					<view @tap.stop="toBooking(item)" class="btn_blue">立即预约</view>
					<view @tap.stop="refundTicket(item)" class="btn_blue">退款</view>
					<!-- <view @tap.stop="changeTicket(item)" class="btn_blue">改签</view> -->
				</view>
				<view class="btns" v-if="item.state==1 || item.state==5 &&item.orderType==0 ">
					<view @tap.stop="refundTicket(item)" class="btn_blue">退款</view>
					<!-- <view @tap.stop="changeTicket(item)" class="btn_blue">改签</view> -->
					<view @tap.stop="delOrder(item)">取消预约</view>
				</view>

			</view>
		</view>
		<!-- <view class="tip">{{orderList.length>0?'已显示全部订单':'暂无订单'}}</view> -->
		<nodata v-if="orderList.length === 0"></nodata>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import nodata from '@/compoments/NoData/index.vue'
	import TopTabs from '@/compoments/TopTabs/topTabs.vue';
	export default {
		components: {
			TopTabs,
			nodata
		},
		data() {
			return {
				mysearch: '',
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleStyle: {
					fontSize: '36rpx',
					fontWeight: "bold",
					color: "#333333"
				},
				tabList: [{
						name: '全部'
					},
					{
						name: '待支付'
					},
					{
						name: '待使用'
					},
					{
						name: '退款/售后'
					}
				],
				orderList: [],
				oscConfig: {
					0: 'textDzf',
					1: 'textDcx',
					3: 'textQx',
					5: 'textDzf',
				},
				pageIndex: 1,
				pageCount: 10,
				// isOver: false,
				FishJialeOcfg: this.$FishJialeOcfg,
				state: ''
			}
		},
		onLoad() {
			this.getList();
			// setInterval(() => {
			// 	this.init();
			// }, 5 * 60 * 1000)
		},
		onReachBottom() {
			// if (this.isOver) return
			this.getList();
		},
		methods: {
			// 评价
			appraise(item) {
				let obj = {
					guideId: item.userId,
					orderCode: item.orderCode,
					sourceType: 10,
				}
				uni.navigateTo({
					url: '/pagesMy/appraise/appraise?obj=' + JSON.stringify(obj),
				});

			},

			init() {
				this.pageIndex = 1;
				// this.isOver = false;
				this.orderList = [];
				this.getList();
			},
			// 搜索
			sousuo(keyword) {
				this.mysearch = keyword;
				this.pageIndex = 1;
				// this.isOver = false;
				this.orderList = [];
				this.getList();
			},
			// 立即预约
			toBooking(item) {
				uni.navigateTo({
					url: '/pagesMy/FishJialeList/subscribe?object=' + JSON.stringify({
						...item
					})
				})
			},
			// 取消预约
			delOrder(item) {
				this.$api.get('/api/fishermanreservation/reservationDel', {
					orderCode: item.orderCode,
				}).then(res => {
					if (res.data.code === 0) {
						this.$showToast('预约已取消');
						this.init();
					} else this.$showModal(res.data.msg)
				})
			},

			getList() {
				let that = this;
				this.$api.get('/api/fishermanOrder/page', {
					openId: JSON.parse(uni.getStorageSync('userInfo')).openId,
					state: this.state,
					page: this.pageIndex,
					limit: this.pageCount,
					search: this.mysearch,
				}).then(res => {
					if (res.data.code === 0) {
						that.pageIndex++;
						let {
							list,
							total
						} = res.data.data;

						that.orderList = [...that.orderList, ...list];

					} else that.$showToast(res.data.msg);
				})
			},
			changeTab(index) {
				if (index === 0) this.state = '';
				else if (index === 1) this.state = '0'
				else if (index === 2) this.state = '1,4,5';
				else if (index === 3) this.state = '-3,-2,3';
				// else this.state = '-2,-1,3,4,5,6,7,8,9,10,11';
				this.init();
			},
			//申请售后
			applyAfterSales(item) {
				this.$refs.uToast.show({
					type: 'success',
					title: '',
					message: "正在开发",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
				})
			},
			//退款
			refundTicket(item) {
				uni.redirectTo({
					url: '/pagesMy/FishJialeList/FishJialeDetails?id=' + item.orderCode
				})
				// this.$refs.uToast.show({
				// 	type: 'success',
				// 	title: '',
				// 	message: "正在开发",
				// 	iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
				// })
			},
			//改签
			changeTicket(item) {
				this.$refs.uToast.show({
					type: 'success',
					title: '',
					message: "正在开发",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
				})
			},
			//取消订单
			cancelOrder(item) {
				this.$api.post('/api/fishermanOrder', {
					orderId: item.orderCode,
					state: item.state
				}).then(res => {
					if (res.data.code === 0) {
						this.$showToast('订单已取消');
						this.init();
					} else this.$showModal(res.data.msg)
				})
			},
			// 删除订单
			del(item) {

				let ids = item.id
				this.$api.del('/api/fishermanOrder', [
					ids
				]).then(res => {
					if (res.data.code === 0) {
						this.$showToast('订单已删除');
						this.init();
					} else this.$showModal(res.data.msg)
				})
			},
			//去支付
			toPay(item) {
				this.$api.post('/order/icbc/createOrder', {
					orderCode: item.orderCode,
					tradeType: 'JSAPI',
					openId: JSON.parse(uni.getStorageSync('userInfo')).openId
				}, false).then(res => {
					if (res.statusCode == 200 && res.data != null) {
						this.$wxPay(res.data).then(result => {
							this.$showToast('支付成功');
							this.init();
						})
					}
				})
			},
			toDetails(item) {

				uni.redirectTo({
					url: '/pagesMy/FishJialeList/FishJialeDetails?id=' + item.orderCode
				})
			},
			returnBack() {
				uni.reLaunch({
					url: '/pages/my/index'
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page {
		background: #F5F8FA;
		padding: 100rpx 0 1rpx;

		.orders {
			display: flex;
			flex-direction: column;
			align-items: center;

			&>view {
				width: calc(100% - 96rpx);
				margin-top: 20rpx;
				border-radius: 16rpx;
				background: #fff;
				padding: 36rpx 24rpx 24rpx;

				.top {
					display: flex;
					justify-content: space-between;

					.left {
						display: flex;
						align-items: center;

						image {
							width: 36rpx;
							height: 36rpx;
						}

						text {
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #111111;
							line-height: 28rpx;
							margin-left: 20rpx;
						}
					}

					.right {
						text-align: right;
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						line-height: 37rpx;
					}
				}

				.content {
					padding: 22rpx 0 24rpx 56rpx;
					background: #fff;

					.title {
						display: flex;
						align-items: center;
						justify-content: space-between;

						text {
							font-size: 32rpx;
							font-family: PingFang-SC-Bold, PingFang-SC;
							font-weight: bold;
							color: #333333;
							line-height: 45rpx;

							&:last-child {
								color: #111111;
							}
						}
					}

					.date {
						display: flex;
						align-items: center;
						margin-top: 22rpx;

						&>text {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #AAAAAA;
							line-height: 24rpx;
						}
					}

					.room_price {
						margin-top: 16rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #AAAAAA;
					}
				}

				.btns {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					border-top: 1rpx solid #EFEFEF;

					&>view {
						margin: 24rpx 0 0 24rpx;
						width: 148rpx;
						height: 56rpx;
						border: 1rpx solid #EFEFEF;
						border-radius: 28rpx;
						line-height: 56rpx;
						text-align: center;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;

						&.btn_blue {
							border: 1rpx solid #007A69;
							color: #007A69;
						}
					}
				}

				&.qx {
					text {
						color: #AAAAAA !important;
					}
				}
			}
		}

		.tip {
			width: 100%;
			text-align: center;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #AAAAAA;
			line-height: 33rpx;
			padding: 56rpx 0;
		}

		.textQx {
			color: #AAAAAA;
		}

		.textDcx {
			color: #333333;
		}

		.textDzf {
			color: #FF7D01;
		}
	}
</style>